import { useEffect, useState } from 'react';
import { useParams, Link } from 'react-router-dom';
import { ArrowLeftIcon, CalendarIcon, UserIcon, TagIcon } from 'lucide-react';
import ImageLoader from '../components/UI/ImageLoader';
// Sample insights data
const insightsData = {
  'nvidia-ai': {
    title: 'NVIDIA announces new AI accelerators with 5x performance boost',
    subtitle: 'New hardware aims to address the growing computational demands of large language models',
    heroImage: 'https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
    category: 'Industry',
    author: 'Daniel Roberts',
    date: 'July 25, 2023',
    tags: ['AI', 'NVIDIA', 'Hardware', 'Data Centers'],
    content: [{
      type: 'paragraph',
      text: 'NVIDIA has unveiled its next generation of AI accelerators, promising a 5x performance boost for training and inference of large language models. The announcement comes as AI workloads continue to grow exponentially, putting pressure on data centers worldwide.'
    }, {
      type: 'paragraph',
      text: "The new accelerators, built on NVIDIA's latest architecture, feature significantly improved tensor cores and higher memory bandwidth, addressing two of the most critical bottlenecks in AI computation. According to NVIDIA, the accelerators can train a 175-billion parameter language model in half the time of previous hardware while consuming 30% less power."
    }, {
      type: 'heading',
      text: 'Rising Demand for AI Compute'
    }, {
      type: 'paragraph',
      text: "The timing of NVIDIA's announcement aligns with the explosive growth of generative AI applications, which require massive computational resources. Industry analysts estimate that the compute requirements for training state-of-the-art AI models have been doubling approximately every 3-4 months, far outpacing Moore's Law."
    }, {
      type: 'paragraph',
      text: '"We\'re seeing unprecedented demand for AI compute," said NVIDIA CEO Jensen Huang during the announcement. "These new accelerators will help our customers build and deploy the next generation of AI applications that will transform industries."'
    }, {
      type: 'image',
      url: 'https://images.unsplash.com/photo-1639322537228-f710d846310a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80',
      caption: "NVIDIA's new AI accelerators are designed for data center deployment."
    }, {
      type: 'heading',
      text: 'Technical Specifications'
    }, {
      type: 'paragraph',
      text: 'The new accelerators feature 128GB of HBM3e memory with 8TB/s of memory bandwidth, a significant improvement over previous generations. NVIDIA has also increased the number of tensor cores by 50% while improving their efficiency.'
    }, {
      type: 'paragraph',
      text: 'Power efficiency has been a major focus, with NVIDIA claiming a 30% reduction in power consumption for equivalent workloads. This addresses concerns about the growing energy demands of AI data centers, which have come under scrutiny for their environmental impact.'
    }, {
      type: 'heading',
      text: 'Market Impact'
    }, {
      type: 'paragraph',
      text: "NVIDIA's stock jumped 7% following the announcement, reflecting investor confidence in the company's continued dominance of the AI hardware market. Competitors AMD and Intel are expected to announce their own AI accelerator updates in the coming months, but analysts believe NVIDIA will maintain its significant market lead."
    }, {
      type: 'paragraph',
      text: 'Cloud providers including AWS, Google Cloud, and Microsoft Azure have already committed to deploying the new accelerators in their data centers, with availability expected by the end of the year.'
    }, {
      type: 'heading',
      text: 'Looking Ahead'
    }, {
      type: 'paragraph',
      text: "As AI continues to evolve, the demand for specialized hardware is likely to grow. NVIDIA's roadmap includes further improvements to its accelerator lineup, with a focus on scaling to even larger models and improving energy efficiency."
    }, {
      type: 'paragraph',
      text: 'The company also announced expanded software tools designed to help developers optimize their AI models for the new hardware, including updates to its CUDA platform and new libraries for large language model optimization.'
    }]
  },
  'apple-event': {
    title: 'Apple schedules Spring event, new iPad Pro models expected',
    subtitle: 'The upcoming event may introduce the first OLED iPad Pro and updated Apple Silicon',
    heroImage: 'https://images.unsplash.com/photo-1561154464-82e9adf32764?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
    category: 'Events',
    author: 'Emma Liu',
    date: 'July 20, 2023',
    tags: ['Apple', 'iPad Pro', 'Events'],
    content: [{
      type: 'paragraph',
      text: 'Apple has sent out invitations for its Spring event, scheduled for next month. The event is widely expected to focus on new iPad Pro models featuring OLED displays and the latest Apple Silicon processors.'
    }, {
      type: 'paragraph',
      text: 'Industry analysts suggest this could be the first time Apple brings OLED technology to its tablet lineup, potentially offering improved contrast ratios and power efficiency compared to the current mini-LED displays on the high-end iPad Pro models.'
    }, {
      type: 'heading',
      text: 'What to Expect'
    }, {
      type: 'paragraph',
      text: 'The new iPad Pro models are expected to feature the M3 chip, which would bring significant performance and efficiency improvements over the current M2-powered models. Reports suggest the new tablets will maintain the same form factor but may feature slimmer bezels and possibly thinner designs.'
    }, {
      type: 'paragraph',
      text: 'Apple is also rumored to be introducing new accessories, including an updated Apple Pencil and Magic Keyboard with potential design changes and new features.'
    }, {
      type: 'image',
      url: 'https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80',
      caption: 'The current iPad Pro may see significant upgrades at the upcoming event.'
    }, {
      type: 'heading',
      text: 'Beyond the iPad'
    }, {
      type: 'paragraph',
      text: 'While the iPad Pro is expected to be the star of the show, Apple may also use the event to introduce updates to other product lines. Rumors suggest we might see refreshed MacBook Air models with M3 chips, as well as potentially new Apple Watch bands and iPhone cases with spring colors.'
    }, {
      type: 'paragraph',
      text: 'Some analysts also speculate that Apple could preview new software features expected in iOS 18 and iPadOS 18, particularly those related to AI capabilities that the company has been reportedly developing.'
    }]
  },
  'samsung-fold': {
    title: 'Samsung Galaxy Z Fold 5 leaks reveal radical new hinge design',
    subtitle: "New hinge design could eliminate the crease and improve durability in Samsung's next foldable flagship",
    heroImage: 'https://images.unsplash.com/photo-1610792516307-ea5acd9c3b00?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    category: 'Leaks',
    author: 'Jason Park',
    date: 'July 17, 2023',
    tags: ['Samsung', 'Mobile', 'Foldables'],
    content: [{
      type: 'paragraph',
      text: 'Recent leaks suggest that Samsung has developed a completely redesigned hinge mechanism for the upcoming Galaxy Z Fold 5. The new design reportedly addresses one of the most persistent complaints about foldable phones: the visible crease in the display.'
    }, {
      type: 'paragraph',
      text: 'According to multiple sources familiar with the device, the new "waterdrop" hinge allows the display to form a more gentle curve when folded, reducing stress on the panel and minimizing the appearance of a crease when unfolded.'
    }, {
      type: 'heading',
      text: 'Improved Durability'
    }, {
      type: 'paragraph',
      text: 'Beyond aesthetics, the redesigned hinge is expected to improve overall durability. The new mechanism reportedly allows for more complete closure of the device, reducing the gap between the folded halves and better protecting the internal display from dust and debris.'
    }, {
      type: 'paragraph',
      text: 'Samsung has also supposedly enhanced the ultra-thin glass (UTG) used in the display, making it more resistant to damage from repeated folding and unfolding.'
    }, {
      type: 'image',
      url: 'https://images.unsplash.com/photo-1676312830459-f6f13dfdd899?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
      caption: 'The Galaxy Z Fold 5 is expected to feature a revolutionary new hinge design.'
    }, {
      type: 'heading',
      text: 'Other Expected Improvements'
    }, {
      type: 'paragraph',
      text: 'In addition to the new hinge, leaks suggest the Galaxy Z Fold 5 will feature the Snapdragon 8 Gen 2 processor, improved camera sensors, and potentially a built-in S Pen slot, addressing another common request from users.'
    }, {
      type: 'paragraph',
      text: 'Battery life has reportedly been improved as well, with a slightly larger capacity battery and more efficient components allowing for all-day use even with the large internal display.'
    }]
  },
  'intel-raptor': {
    title: 'Intel Raptor Lake refresh CPUs get official pricing and release date',
    subtitle: "Intel's 14th generation processors will arrive sooner than expected with modest performance gains",
    heroImage: 'https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
    category: 'Hardware',
    author: 'Thomas Chen',
    date: 'July 15, 2023',
    tags: ['Intel', 'CPU', 'Computing'],
    content: [{
      type: 'paragraph',
      text: 'Intel has officially announced pricing and availability for its 14th generation Core processors, codenamed Raptor Lake Refresh. The new CPUs will hit retail channels earlier than anticipated, with availability beginning next month.'
    }, {
      type: 'paragraph',
      text: 'The lineup includes refreshed versions of the Core i9, i7, and i5 series, with modest clock speed improvements over the current 13th generation parts. Intel claims up to 5-8% better performance in single-threaded workloads and 3-5% improvements in multi-threaded applications.'
    }, {
      type: 'heading',
      text: 'Pricing Strategy'
    }, {
      type: 'paragraph',
      text: 'In an interesting move, Intel has kept pricing largely in line with the current 13th generation parts, despite the performance improvements. The flagship Core i9-14900K will retail for $589, the same price as the current i9-13900K.'
    }, {
      type: 'paragraph',
      text: 'This pricing strategy appears to be a direct response to increasing competition from AMD, whose Ryzen 7000 series processors have been gaining market share, particularly in the high-end desktop segment.'
    }, {
      type: 'image',
      url: 'https://images.unsplash.com/photo-1625315714730-d0830962ee17?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
      caption: 'The 14th generation Intel Core processors offer incremental improvements over their predecessors.'
    }, {
      type: 'heading',
      text: 'Platform Compatibility'
    }, {
      type: 'paragraph',
      text: 'Good news for current Intel platform owners: the new CPUs will be compatible with existing 600 and 700 series motherboards following a BIOS update. This means users with recent Intel systems can upgrade without replacing their motherboard.'
    }, {
      type: 'paragraph',
      text: 'Intel has also confirmed that these processors will be the last to use the LGA 1700 socket, with the next generation expected to introduce a new socket and platform.'
    }]
  },
  'meta-ar': {
    title: 'Meta partners with Ray-Ban for next-gen AR glasses',
    subtitle: 'The collaboration aims to bring stylish, consumer-friendly augmented reality glasses to market next year',
    heroImage: 'https://images.unsplash.com/photo-1622979135225-d2ba269cf1ac?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    category: 'AR/VR',
    author: 'Sophia Rodriguez',
    date: 'July 10, 2023',
    tags: ['Meta', 'AR', 'Wearables'],
    content: [{
      type: 'paragraph',
      text: "Meta (formerly Facebook) has announced a strategic partnership with Ray-Ban parent company EssilorLuxottica to develop the next generation of augmented reality glasses. The partnership aims to combine Meta's AR technology with Ray-Ban's iconic design sensibilities."
    }, {
      type: 'paragraph',
      text: "This isn't the first collaboration between the two companies - they previously released the Ray-Ban Stories smart glasses, which featured cameras and speakers but lacked display capabilities. The new product is expected to include true AR features with a heads-up display."
    }, {
      type: 'heading',
      text: 'Technical Challenges'
    }, {
      type: 'paragraph',
      text: 'Creating consumer-friendly AR glasses presents significant technical challenges, including miniaturizing display technology, developing efficient power systems, and creating intuitive control mechanisms.'
    }, {
      type: 'paragraph',
      text: 'According to sources familiar with the project, Meta has made significant breakthroughs in waveguide display technology, allowing for a wider field of view while maintaining a form factor close to traditional eyewear.'
    }, {
      type: 'image',
      url: 'https://images.unsplash.com/photo-1626307416562-ee839676f5fc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80',
      caption: 'The next-generation AR glasses are expected to maintain a stylish, wearable form factor.'
    }, {
      type: 'heading',
      text: 'Market Positioning'
    }, {
      type: 'paragraph',
      text: "Unlike Meta's Quest VR headsets, which are primarily focused on gaming and immersive experiences, the AR glasses are being positioned as an everyday wearable device for notifications, navigation, and light AR experiences."
    }, {
      type: 'paragraph',
      text: 'This approach puts Meta in competition with companies like Apple, which is rumored to be developing its own AR glasses, and Snap, which has been iterating on its Spectacles AR glasses for several years.'
    }]
  },
  'ai-regulation': {
    title: 'EU proposes comprehensive AI regulation framework',
    subtitle: 'New regulations aim to ensure ethical AI development while fostering innovation in the European market',
    heroImage: 'https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1165&q=80',
    category: 'Policy',
    author: 'Martin Weber',
    date: 'July 5, 2023',
    tags: ['AI', 'Regulation', 'EU'],
    content: [{
      type: 'paragraph',
      text: 'The European Union has unveiled a comprehensive regulatory framework for artificial intelligence, establishing what could become the global standard for AI governance. The proposed regulations categorize AI applications based on their potential risks and impose varying levels of oversight.'
    }, {
      type: 'paragraph',
      text: 'Under the framework, AI systems would be classified into four risk categories: unacceptable risk, high risk, limited risk, and minimal risk. Applications deemed to pose unacceptable risks, such as social scoring systems, would be banned outright.'
    }, {
      type: 'heading',
      text: 'High-Risk Applications'
    }, {
      type: 'paragraph',
      text: 'AI systems classified as high risk would include those used in critical infrastructure, education, employment, essential private and public services, law enforcement, migration, and administration of justice. These applications would be subject to strict requirements before they could be deployed in the EU market.'
    }, {
      type: 'paragraph',
      text: 'Requirements include rigorous risk assessments, high quality of datasets to minimize discrimination, logging of activity for traceability, detailed documentation, clear user information, appropriate human oversight, and high levels of robustness, accuracy, and cybersecurity.'
    }, {
      type: 'image',
      url: 'https://images.unsplash.com/photo-1589254065878-42c9da997008?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
      caption: "The EU's regulatory framework aims to establish trust in AI systems while allowing innovation."
    }, {
      type: 'heading',
      text: 'Industry Response'
    }, {
      type: 'paragraph',
      text: 'The tech industry has had mixed reactions to the proposed regulations. Some larger companies have welcomed the clarity that regulations provide, while others, particularly smaller startups, have expressed concerns about compliance costs and potential barriers to innovation.'
    }, {
      type: 'paragraph',
      text: 'Industry groups have called for balanced implementation that protects citizens while allowing European companies to remain competitive in the global AI race, where the US and China have taken early leads.'
    }]
  },
  'spotify-hifi': {
    title: 'Spotify HiFi tier finally launching next quarter',
    subtitle: "After years of delays, Spotify's lossless audio tier is set to compete with Apple Music and Tidal",
    heroImage: 'https://images.unsplash.com/photo-1611339555312-e607c8352fd7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
    category: 'Streaming',
    author: 'Rebecca Moore',
    date: 'July 1, 2023',
    tags: ['Spotify', 'Audio', 'Streaming'],
    content: [{
      type: 'paragraph',
      text: 'Spotify has officially confirmed that its long-awaited HiFi tier will launch next quarter, offering lossless CD-quality audio to subscribers willing to pay a premium. The announcement comes after more than two years of delays since the feature was first announced in February 2021.'
    }, {
      type: 'paragraph',
      text: 'The new tier will allow listeners to stream audio at up to 24-bit/192kHz quality, matching or exceeding the high-resolution offerings from competitors like Apple Music, Amazon Music HD, and Tidal.'
    }, {
      type: 'heading',
      text: 'Pricing and Features'
    }, {
      type: 'paragraph',
      text: "According to sources familiar with Spotify's plans, the HiFi tier will be priced at $19.99 per month, positioning it above the current Premium tier ($9.99/month) but competitive with other high-resolution streaming services."
    }, {
      type: 'paragraph',
      text: 'In addition to lossless audio, the tier will include enhanced features such as personalized spatial audio mixes, an expanded library of Dolby Atmos content, and exclusive access to certain live recordings and studio sessions.'
    }, {
      type: 'image',
      url: 'https://images.unsplash.com/photo-1614149162883-504ce46d75a4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
      caption: 'Spotify HiFi will deliver lossless audio quality for audiophiles and music enthusiasts.'
    }, {
      type: 'heading',
      text: 'Market Impact'
    }, {
      type: 'paragraph',
      text: 'The move comes at a critical time for Spotify, which has faced increasing competition in the premium audio space. Apple Music and Amazon Music have offered high-resolution audio at no additional cost to subscribers since 2021, while Tidal has long catered to the audiophile market.'
    }, {
      type: 'paragraph',
      text: "Industry analysts suggest that while the HiFi tier may not attract a large percentage of Spotify's user base, it could help retain audiophiles who might otherwise switch to competing services, while also creating a new revenue stream from users willing to pay for higher quality."
    }]
  },
  'playstation-vr2': {
    title: 'PlayStation VR2 sales exceed expectations despite high price',
    subtitle: "Sony's premium VR headset finds success with hardcore gamers and VR enthusiasts",
    heroImage: 'https://images.unsplash.com/photo-1622979135240-caa6648190b6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    category: 'Gaming',
    author: 'Chris Johnson',
    date: 'June 28, 2023',
    tags: ['PlayStation', 'VR', 'Gaming'],
    content: [{
      type: 'paragraph',
      text: "Sony has announced that PlayStation VR2 sales have exceeded internal forecasts, despite the headset's $549 price point and requirement for a PlayStation 5 console. The company revealed that the premium VR system has sold over 1.5 million units since its launch in February."
    }, {
      type: 'paragraph',
      text: 'The strong sales figures come as a surprise to many industry analysts who had predicted more modest adoption due to the high total cost of entry - around $1,000 when including the required PS5 console.'
    }, {
      type: 'heading',
      text: 'Content Driving Adoption'
    }, {
      type: 'paragraph',
      text: "Sony attributes the success to a growing library of VR-exclusive titles and enhanced versions of popular games. Flagship titles like Horizon Call of the Mountain and Resident Evil Village's VR mode have been particularly well-received, showcasing the headset's capabilities."
    }, {
      type: 'paragraph',
      text: 'The company also revealed that PSVR2 users are spending an average of 2.4 hours per week in VR, significantly higher than the industry average for other consumer VR platforms.'
    }, {
      type: 'image',
      url: 'https://images.unsplash.com/photo-1633209245425-186d6b4e8ea7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
      caption: 'PlayStation VR2 offers high-resolution OLED displays and advanced haptic controllers.'
    }, {
      type: 'heading',
      text: 'Future Outlook'
    }, {
      type: 'paragraph',
      text: "Following the stronger-than-expected sales, Sony has announced plans to increase investment in VR game development. The company revealed that over 50 additional titles are currently in development for the platform, including several from Sony's first-party studios."
    }, {
      type: 'paragraph',
      text: 'Industry analysts now project that PSVR2 could reach 4-5 million units sold by the end of 2024, establishing it as the most successful premium VR headset on the market and potentially driving broader adoption of high-end virtual reality experiences.'
    }]
  }
};
const InsightDetail = () => {
  const {
    insightId
  } = useParams<{
    insightId: string;
  }>();
  const [insight, setInsight] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  useEffect(() => {
    // Simulate API fetch
    setTimeout(() => {
      if (insightId && insightsData[insightId as keyof typeof insightsData]) {
        setInsight(insightsData[insightId as keyof typeof insightsData]);
        setLoading(false);
      } else {
        setError(true);
        setLoading(false);
      }
    }, 500);
  }, [insightId]);
  useEffect(() => {
    if (insight) {
      document.title = `${insight.title} | TronoraHub`;
    } else if (error) {
      document.title = 'Article Not Found | TronoraHub';
    } else {
      document.title = 'Loading Article | TronoraHub';
    }
  }, [insight, error]);
  if (loading) {
    return <div className="w-full bg-[#0d0d10] pt-24 pb-16 min-h-screen flex items-center justify-center">
        <div className="w-12 h-12 border-4 border-[#4361ee] border-t-transparent rounded-full animate-spin"></div>
      </div>;
  }
  if (error || !insight) {
    return <div className="w-full bg-[#0d0d10] pt-24 pb-16 min-h-screen">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-3xl md:text-4xl font-bold font-display mb-6">
            Article Not Found
          </h1>
          <p className="text-[#8a8f98] mb-8">
            We couldn't find the article you're looking for.
          </p>
          <Link to="/insights" className="button-primary py-2 px-6 rounded-full inline-flex items-center">
            <ArrowLeftIcon size={16} className="mr-2" />
            Back to Insights
          </Link>
        </div>
      </div>;
  }
  return <div className="w-full bg-[#0d0d10] pt-20 pb-16">
      {/* Hero Section */}
      <div className="relative h-[40vh] md:h-[50vh]">
        <ImageLoader src={insight.heroImage} alt={insight.title} className="w-full h-full" />
        <div className="absolute inset-0 bg-gradient-to-t from-[#0d0d10] via-[#0d0d10]/70 to-transparent"></div>
        <div className="absolute bottom-0 left-0 right-0">
          <div className="container mx-auto px-4 pb-8">
            <Link to="/insights" className="inline-flex items-center text-[#8a8f98] hover:text-white mb-4">
              <ArrowLeftIcon size={16} className="mr-2" />
              Back to Insights
            </Link>
            <span className="inline-block px-3 py-1 rounded-full bg-[#151518]/80 text-xs font-medium text-[#4361ee] mb-4">
              {insight.category}
            </span>
            <h1 className="text-3xl md:text-4xl font-bold font-display mb-3 max-w-4xl">
              {insight.title}
            </h1>
            <p className="text-lg md:text-xl text-[#8a8f98] mb-4 max-w-3xl">
              {insight.subtitle}
            </p>
            <div className="flex flex-wrap items-center text-sm text-[#8a8f98]">
              <div className="flex items-center mr-6 mb-2">
                <UserIcon size={14} className="mr-2" />
                <span>{insight.author}</span>
              </div>
              <div className="flex items-center mb-2">
                <CalendarIcon size={14} className="mr-2" />
                <span>{insight.date}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="container mx-auto px-4 py-8">
        <div className="max-w-3xl mx-auto">
          {insight.content.map((section: any, index: number) => {
          if (section.type === 'paragraph') {
            return <p key={index} className="text-[#e0e0e0] mb-6 leading-relaxed">
                  {section.text}
                </p>;
          } else if (section.type === 'heading') {
            return <h2 key={index} className="text-2xl font-bold font-display mb-4 mt-8">
                  {section.text}
                </h2>;
          } else if (section.type === 'image') {
            return <figure key={index} className="my-8">
                  <ImageLoader src={section.url} alt={section.caption || 'Article image'} className="w-full rounded-lg" />
                  {section.caption && <figcaption className="mt-2 text-sm text-[#8a8f98] text-center">
                      {section.caption}
                    </figcaption>}
                </figure>;
          }
          return null;
        })}
          {/* Tags */}
          {insight.tags && insight.tags.length > 0 && <div className="flex flex-wrap items-center mt-12 pt-6 border-t border-[#8a8f98]/20">
              <TagIcon size={16} className="text-[#8a8f98] mr-3" />
              {insight.tags.map((tag: string, index: number) => <Link key={index} to={`/insights?tag=${tag.toLowerCase()}`} className="px-3 py-1 bg-[#151518] text-[#8a8f98] text-sm rounded-full mr-2 mb-2 hover:bg-[#1a1a1d] hover:text-white transition-colors">
                  {tag}
                </Link>)}
            </div>}
        </div>
      </div>
    </div>;
};
export default InsightDetail;